<template>
    <div class="btnGroupContainer" v-show="data.length > 0">
        <div class="btnGroup">
            <el-button
                v-for="(item, index) in data"
                :key="index"
                :type="item.type"
                :disabled="!!item.disabled"
                :icon="item.icon"
                size="small"
                @click="handleClick(item.eventName)"
            >{{item.text}}
            </el-button>
        </div>
        <div>
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'btnGroup',
    props: {
        data: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {};
    },
    methods: {
        handleClick(eventName) {
            this.$emit(eventName);
        },
    },
};
</script>

<style scoped lang="less">
.btnGroupContainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #fff;
    height: 60px;
    line-height: 60px;
    padding: 0 30px;
    margin-bottom: 10px;
    
    .btnGroup{
    }
}
</style>
